<template>
    <router-link :to="link" tag="li" class="cell"
                 :class="{'has-arrow' : !hideArrow , 'full-line' : fullLine ,'multi-line' : multiLine}"
                 >
      <slot></slot>
      <i class="cell-icon" :class="icon" v-if="icon"></i>
      <div class="cell-label" v-if="label">{{label}}</div>
      <div class="cell-value" v-if="value">{{value}}</div>
      <div class="cell-right" v-if="hasRight">
        <span class="note" v-if="note">{{note}}</span>
        <span class="badge" v-if="badge">{{badge}}</span>
        <slot name="right"></slot>
      </div>
    </router-link>
</template>

<script>
export default {
  props:{
      link : [String , Object],
      hideArrow : {
          type:Boolean,
          default:false
      },
      multiLine : {
          type:Boolean,
          default:false
      },
      hasRight : {
          type:Boolean,
          default:false
      },
      fullLine : {
          type:Boolean,
          default:false
      },
      icon : {
          type:String,
          default:''
      },
      note : {
          type:String,
          default:''
      },
      badge : {
          type:String,
          default:''
      },
      label : {
          type:String,
          default:''
      },
      value : {
          type:String,
          default:''
      },

  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'

.cell
  display: flex
  align-items: center
  justify-content: space-between
  padding: 0 $spacing
  background: #fff
  position: relative
  font-size: $font-md
  height: $cell-height
  box-sizing: border-box;
  transition: all .2s
  &.multi-line{
    height: auto;
    min-height: $cell-height
  }
  + .cell
    fine-border(top, $border-light,$spacing)
  &.full-line:before
    left: 0
  .cell-icon
    line-height: 1
    text-align: center
    font-size: 22px
    margin-right: 8px
  .cell-label
    color: $text-light
    margin-right: 10px
    min-width: 80px
    font-size: $font-md
  .cell-value
    flex: 1
    font-size: $font-md
    line-height: 1.5
    color: $text-dark
    overflow: hidden
    white-space: normal
    display: flex
    flex-flow: column wrap
    justify-content: center
  .cell-right
    margin-left: 10px
    display: flex
    align-items: center
    justify-content: center
    .note
      font-size: $font-xs
      color: $text-light
  &:active
    background-color: #eee !important
.has-arrow
  padding-right: 26px !important
  &:after
    content: ""
    position: absolute
    right: $spacing
    top: 50%
    transform: translate(0, -50%) rotate(45deg)
    width: 8px
    height: 8px
    border-radius: 1px
    border: solid #ccc
    border-width: 2px 2px 0 0
.badge
  display: inline-block;
  line-height: 17px;
  box-sizing: border-box;
  color: #fff;
  min-width: 18px;
  font-size: $font-xs;
  background-color: $red;
  text-align: center;
  border-radius: 10px;
  padding: 0 5px;
</style>
